import 'package:flutter/material.dart';
import '../theme/app_theme.dart';

class PeriodSettingsScreen extends StatefulWidget {
  const PeriodSettingsScreen({super.key});

  @override
  PeriodSettingsScreenState createState() => PeriodSettingsScreenState();
}

class PeriodSettingsScreenState extends State<PeriodSettingsScreen> {
  bool _smartPredictionEnabled = false;
  bool _showPregnancyRateEnabled = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppTheme.background,
      appBar: AppBar(
        backgroundColor: AppTheme.white,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: AppTheme.textPrimary),
          onPressed: () => Navigator.pop(context),
        ),
        centerTitle: true,
        title: const Text(
          '经期设置',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: AppTheme.textPrimary,
          ),
        ),
      ),
      body: ListView(
        children: [
          
          Container(
            margin: const EdgeInsets.only(top: 20),
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  '您的月经大概持续几天？',
                  style: TextStyle(
                    fontSize: 14,
                    color: AppTheme.textSecondary,
                  ),
                ),
                const SizedBox(height: 8),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
                  decoration: BoxDecoration(
                    color: AppTheme.white,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: const Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          Icon(Icons.water_drop, color: AppTheme.primaryColor),
                          SizedBox(width: 8),
                          Text('经期长度', style: AppTheme.bodyStyle),
                        ],
                      ),
                      Row(
                        children: [
                          Text('5天', style: AppTheme.bodyStyle),
                          Icon(Icons.chevron_right, color: AppTheme.textLight),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

          
          Container(
            margin: const EdgeInsets.only(top: 20),
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  '两次月经开始日大概间隔多久？',
                  style: TextStyle(
                    fontSize: 14,
                    color: AppTheme.textSecondary,
                  ),
                ),
                const SizedBox(height: 8),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
                  decoration: BoxDecoration(
                    color: AppTheme.white,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: const Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          Icon(Icons.calendar_today, color: AppTheme.primaryColor),
                          SizedBox(width: 8),
                          Text('周期长度', style: AppTheme.bodyStyle),
                        ],
                      ),
                      Row(
                        children: [
                          Text('28天', style: AppTheme.bodyStyle),
                          Icon(Icons.chevron_right, color: AppTheme.textLight),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

          
          Container(
            margin: const EdgeInsets.only(top: 20),
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
              decoration: BoxDecoration(
                color: AppTheme.white,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Row(
                    children: [
                      Icon(Icons.lightbulb_outline, color: AppTheme.primaryColor),
                      SizedBox(width: 8),
                      Text('使用智能预测', style: AppTheme.bodyStyle),
                    ],
                  ),
                  Switch(
                    value: _smartPredictionEnabled,
                    onChanged: (value) {
                      setState(() {
                        _smartPredictionEnabled = value;
                      });
                    },
                    activeThumbColor: AppTheme.primaryColor,
                    inactiveThumbColor: AppTheme.gray,
                    inactiveTrackColor: AppTheme.lightGray,
                  ),
                ],
              ),
            ),
          ),
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Text(
              '建议开启，开启后美柚会根据您设置的数据和之前的月经记录预测下次的月经时间。',
              style: TextStyle(
                fontSize: 12,
                color: AppTheme.textLight,
              ),
            ),
          ),

          
          Container(
            margin: const EdgeInsets.only(top: 12),
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
              decoration: BoxDecoration(
                color: AppTheme.white,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Row(
                    children: [
                      Icon(Icons.favorite, color: AppTheme.primaryColor),
                      SizedBox(width: 8),
                      Text('显示怀孕几率', style: AppTheme.bodyStyle),
                    ],
                  ),
                  Switch(
                    value: _showPregnancyRateEnabled,
                    onChanged: (value) {
                      setState(() {
                        _showPregnancyRateEnabled = value;
                      });
                    },
                    activeThumbColor: AppTheme.primaryColor,
                    inactiveThumbColor: AppTheme.gray,
                    inactiveTrackColor: AppTheme.lightGray,
                  ),
                ],
              ),
            ),
          ),
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Text(
              '关闭后，美柚首页和今日密报将不再展示怀孕几率相关信息。',
              style: TextStyle(
                fontSize: 12,
                color: AppTheme.textLight,
              ),
            ),
          ),
          
          
          Container(
            margin: const EdgeInsets.only(top: 12),
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: GestureDetector(
              onTap: () {
                Navigator.pushNamed(context, '/period_reminder_settings');
              },
              child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
                decoration: BoxDecoration(
                  color: AppTheme.white,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: const Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        Icon(Icons.notifications, color: AppTheme.primaryColor),
                        SizedBox(width: 8),
                        Text('经期提醒设置', style: AppTheme.bodyStyle),
                      ],
                    ),
                    Icon(Icons.chevron_right, color: AppTheme.textLight),
                  ],
                ),
              ),
            ),
          ),
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Text(
              '设置经期、排卵期和生育窗口提醒',
              style: TextStyle(
                fontSize: 12,
                color: AppTheme.textLight,
              ),
            ),
          ),

          
          Container(
            margin: const EdgeInsets.only(top: 60, bottom: 20),
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: const Column(
              children: [
                Text(
                  '您所填写的生理信息将用于经期记录、分析及预测',
                  style: TextStyle(
                    fontSize: 12,
                    color: AppTheme.textLight,
                  ),
                  textAlign: TextAlign.center,
                ),
                SizedBox(height: 12),
                Divider(color: AppTheme.lightGray),
              ],
            ),
          ),
        ],
      ),
    );
  }
}